<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品展示</title>
    <th:block th:replace="layout :: resource"></th:block>
</head>
<body>
<th:block th:replace="layout :: top"/>
<button class="layui-btn layui-col-lg-offset9" id="addGoods" style="margin-top: 20px">添加商品</button>
<button class="layui-btn layui-btn-danger layui-col-lg-offset10" id="addAdmin" style="margin-top: 20px">添加员工</button>
<div class="layui-container">
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">商品管理</li>
            <li>员工管理</li>
            <li>货物记录</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <table id="goodsTable" class="layui-table" lay-filter="goodsTable"></table>
            </div>
            <div class="layui-tab-item">
                <table id="adminTable" class="layui-table" lay-filter="adminTable"></table>
            </div>
            <div class="layui-tab-item">
                <table id="recordTable" class="layui-table" lay-filter="recordTable"></table>
            </div>
            <!-- <div class="layui-tab-item">待开发</div> -->
        </div>
    </div>
</div>
<script>

    var pageObj = {
        goodsListUrl: "/goods/api/list",
        goodsDetailUrl: "/goods/detail/",
        goodsDeleteUrl: "/goods/api/delete/",
        goodsUpdateUrl: "/goods/update/",
        goodsAddUrl: "/goods/add",

        adminListUrl: "/admin/api/list",
        adminDetailUrl: "/admin/detail/",
        adminDeleteUrl: "/admin/api/delete/",
        adminAddUrl: "/admin/add",

        recordListUrl: "/goods/api/record",
        recordDetailUrl: "/goods/record/"
    }

    layui.$(function () {
        //监听选项卡
        layui.use('element', function () {
            var element = layui.element;

            //货物表单监听
            element.on('tab(goodsTable)', function (data) {
                console.log(data);
            });
        });
        layui.use('element', function () {
            var element = layui.element;

            //管理员表单监听
            element.on('tab(adminTable)', function (data) {
                console.log(data);
            });
        });
        layui.use('element', function () {
            var element = layui.element;

            //货物表单监听
            element.on('tab(recordTable)', function (data) {
                console.log(data);
            });
        });

        layui.use('table', function () {
            var table = layui.table;
            table.render({
                elem: '#goodsTable',
                contentType: 'application/json;charset=UTF-8',
                url: pageObj.goodsListUrl,
                method: 'POST',
                cellMinWidth: 80,
                height: 'full-200',
                page: {limits: [10, 15, 30, 50], limit: 15, groups: 10},
                cols: [
                    [
                        {field: 'id', title: 'ID', width: 85, align: "center"}
                        , {field: 'name', title: '商品名', width: 300, align: "center"}
                        , {field: 'price', title: '价格', width: 120, align: "center"}
                        , {field: 'cost', title: '成本', width: 100, align: "center"}
                        , {field: 'number', title: '库存', width: 100, align: "center"}
                        , {field: 'categoryId', title: '所属类别', width: 160, align: "center"}
                        , {title: '操作', width: 250, align: 'center', toolbar: '#barDemo0'}
                    ]
                ]
            });
            table.render({
                elem: '#adminTable',
                contentType: 'application/json;charset=UTF-8',
                url: pageObj.adminListUrl,
                method: 'POST',
                cellMinWidth: 80,
                height: 'full-200',
                page: {limits: [10, 15, 30, 50], limit: 15, groups: 10},
                cols: [
                    [
                        {field: 'id', title: 'ID', width: 85, align: "center"}
                        , {field: 'username', title: '账号', width: 780, align: "center"}
                        , {title: '操作', width: 250, align: 'center', toolbar: '#barDemo1'}
                    ]
                ]
            });
            table.render({
                elem: '#recordTable',
                contentType: 'application/json;charset=UTF-8',
                url: pageObj.recordListUrl,
                method: 'POST',
                cellMinWidth: 80,
                height: 'full-200',
                page: {limits: [10, 15, 30, 50], limit: 15, groups: 10},
                cols: [
                    [
                        {field: 'id', title: 'ID', width: 85, align: "center"}
                        , {field: 'name', title: '商品名', width: 215, align: "center"}
                        , {field: 'price', title: '价格', width: 120, align: "center"}
                        , {field: 'cost', title: '成本', width: 100, align: "center"}
                        , {field: 'number', title: '库存', width: 100, align: "center"}
                        , {field: 'categoryId', title: '所属类别', width: 160, align: "center"}
                        , {field: 'adminId', title: '操作者id', width: 85, align: "center"}
                        , {title: '操作', width: 250, align: 'center', toolbar: '#barDemo2'}
                    ]
                ]
            });
            table.on('tool(goodsTable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                if (layEvent === 'detail0') {
                    layer.open({
                        title: '操作',
                        area: ['430px', '450px'],
                        anim: 1,
                        type: 2,
                        content: pageObj.goodsDetailUrl + data.name + '/' + data.price + '/' + data.cost + '/' + data.number + '/' + data.categoryId

                    });
                } else if (layEvent === 'del0') { //删除
                    layer.confirm('真的删除行么', function (index) {
                        obj.del();
                        layer.close(index);
                        $.ajax({
                            url: pageObj.goodsDeleteUrl + data.id,
                            method: "POST",
                            success: function (result) {
                                if (result.code == 0) layui.msg("删除成功！", {shade: 0.3, time: 2000, icon: 1})
                                else layui.msg("删除失败，请处理！");
                            },
                            error: function () {
                                layui.msg("服务器开小差儿了！");
                            }
                        });
                    });
                } else if (layEvent === 'update0') { //编辑
                    layer.open({
                        title: '操作',
                        area: ['430px', '450px'],
                        anim: 1,
                        type: 2,
                        content: pageObj.goodsUpdateUrl + data.name + '/' + data.price + '/' + data.cost + '/' + data.number + '/' + data.categoryId + '/' + data.id
                    });
                }
            });
            table.on('tool(adminTable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                if (layEvent === 'del1') { //删除
                    layer.confirm('真的删除行么', function (index) {
                        obj.del();
                        layer.close(index);
                        $.ajax({
                            url: pageObj.adminDeleteUrl + data.id,
                            method: "POST",
                            success: function (result) {
                                if (result.code == 0) layui.msg("删除成功！", {shade: 0.3, time: 2000, icon: 1})
                                else layui.msg("删除失败，请处理！");
                            },
                            error: function () {
                                layui.msg("服务器开小差儿了！");
                            }
                        });
                    });
                }
            });
            table.on('tool(recordTable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                if (layEvent === 'detail2') {
                    layer.open({
                        title: '操作',
                        area: ['430px', '395px'],
                        anim: 1,
                        type: 2,
                        content: pageObj.recordDetailUrl + data.name + '/' + data.price + '/' + data.cost + '/' + data.number + '/' + data.categoryId + '/' +data.adminId
                    });
                }
            });
        });

        $("#addGoods").on('click', function () {
            layer.open({
                title: '操作',
                area: ['430px', '450px'],
                anim: 1,
                type: 2,
                content: pageObj.goodsAddUrl
            });
        });
        $("#addAdmin").on('click', function () {
            layer.open({
                title: '操作',
                area: ['430px', '270px'],
                anim: 1,
                type: 2,
                content: pageObj.adminAddUrl
            });
        });
    })

</script>

<script type="text/html" id="barDemo0">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail0">预览</a>
    <a class="layui-btn layui-btn-xs" lay-event="update0">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del0">删除</a>
</script>
<script type="text/html" id="barDemo1">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del1">删除</a>
</script>
<script type="text/html" id="barDemo2">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail2">预览</a>
</script>
</body>
</html>